/**
 * tabs
 * 结构:
 * <div id=''>
 * 		<div class="tabs-nav">
 * 			<span class="music-tab-hover">tab1</span><span>tab2</span>
 * 		</div>
 * 		<div class="tabs-nav">
 * 			<ul>
 * 				<li class="current">...</li>
 * 			</ul>
 * 		</div>
 *     <ul class="tabs-nav">
 *     		<li class="current">...</li><li>...</li>
 *     </ul>
 * 		<div class="tabs-tab"></div>
 * 		<div class="tabs-tab"></div>
 * 		...
 * </div>
 * @param
 * options = {
 * 		hoverClass: 'music-tab-hover',
 * 		firstTab: 0,
 *      onswitch: function($nav, $tab, $this){}
 * }
 * @author  tanggf
 */
(function($){
	$.fn.tabs = function(options){
		//default setting
		options = $.extend({
			hoverClass: 'music-tab-hover',
			firstTab: 0,
			onswitch: function(){}
		}, options);
		
		return this.each(function(){
			var $this = $(this);
			var $navs = $this.children("div.tabs-nav").children("span");			
			if($navs.length == 0){
				$navs = $this.children("ul.tabs-nav").children("li");
			}
			if($navs.length == 0){
				$navs = $this.children("div.tabs-nav").children("ul").children("li");				
			}
			var $navas = $navs.children("a");
			
			var $tabs = $this.children("div.tabs-tab");
			var current = 0;
			var $navclickers = $navas || $navs;				
						
			$navclickers.each(function(index){
				var $nav = $(this);
				$nav.click(function(){					
					if(index != current){
						current = index;
						$navs.removeClass(options.hoverClass).eq(index).addClass(options.hoverClass);								
						var $tab = $tabs.eq(index);
						$tabs.hide();
						$tab.show();
						options.onswitch($nav, $tab, $this);
					}
				});
			});		
			
			if(options.firstTab > 0){				
				$navclickers.eq(options.firstTab).click();
			}
		});		
	};
})(jQuery);